<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> 
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<title>注册</title>
<style>
 body{
  background: #65cea7 url("image/login-bg.jpg") no-repeat fixed;
 }
 .form-sigin{
    max-width:330px;
    margin:100px auto;
    background:#fff;
    border-radius:5px;
 }
 .form-sigin-heading{
  padding:25px 15px;
  position:relative;
 }
 .form-sigin-heading .sign-title{
  position:absolute;
  top:-60px;
  left:0px;
  width:100%;
  color:#fff;
  text-transform:uppercase;
  font-size:24px;
 }
 
 .login-wrap{
  padding:20px;
  position:relative;
  
 }
 .login-wrap p{
  text-align:left;
  font-size:16px;
  color:#b6b6b6;
  }
  .login-wrap input[type="tel"],.login-wrap input[type="submit"], .login-wrap input[type="password"], .login-wrap input[type="text"]{
   width:90%;
   margin-bottom:0px;
   background:#eaeaec;
   border-radius:5px;
   padding:10px 5px;
   border:1px solid #ccc;
  }
  .login-wrap input[type="button"]{
   width:50%;
  }
 
  label{
   display:inline-block;
   float:left;
   width:50%;
   
  }

  .btn-sigin{
   background:#6bc5a4;
   font-size:30px;
   color:#fff;
   width:94%;
   padding:10px 5px;
   margin-top:20px;
  }
  .registration{
   color:#c7c7c7;
   text-align:center;
   margin-top:15px;
   padding-bottom:15px;
  }
  .registration a{
  color:  #6bc5a4;
  }
  .header ul li{
   list-style:none;
   float:left;
   width:50%;
   text-align:center;
   
  }
  .header ul li a{
   text-decoration:none;
   color:#000;
  }

  .header{
   height:44px;
   
  }
  .content span{
   color:red;
  }
  #attach1,#attach2,#attach3{
   font-size:10px;
   height:20px;
   padding:0px;
   margin-top:0px;
   color:red;
   margin-left:5px;
   
  }
  .content ul{
   list-style:none;
   margin:0px;
  }
  .content li{
    float:left;
    display:inline-flex;
    width:50%;
  }
  #attach3{
   clear:both;
  }

</style>
</head>
<body>


<div class="login-body">
 <div class="container">
  <form class="form-sigin" action="<%=request.getContextPath()%>/sigin?method=sigin" name="form1"  method="post">
   <div class="form-sigin-heading text-center">
    <h1 class="sign-title">resistration</h1>
    <img src="image/login-logo.png">
   </div>
   
   <div class="login-wrap">
    <div class="content">
	 <div><span>*</span><input type="tel" placeholder="手机号"  name="phone"  class="form-control"></div>
	 <div id="attach1" style="font-size:12px" ></div>
	 <div>
	 <ul>
	  <li><span style="line-height:40px">*</span><input type="text" placeholder="手机验证码"  name="checkcode"  onclick="return checkcode()" class="form-control">
	  </li>
	  <li>
         <input type="submit" name="btn" class="form-control" onclick="return dosubmit()" value="获取手机验证码">
	  </li>
	 </ul>
	 
	 </div>
	 <div id="attach3" style="font-size:12px" ></div>
     <div><span>*</span><input type="password" placeholder="密码" name="pwd" class="form-control"></div>
     <div id="attach2"></div> 
     <div><span></span><input type="text" style="margin-left:5px" autofocus="autofocus" placeholder="邀请码(推介人id)" class="form-control"></div>
     <div><button type="submit" onclick="return check2()" style="margin-left:5px" class="btn btn-lg btn-sigin"><i class="icon-ok"></i>注册</button></div>
     </div>
    </div>
    <div class="registration">
     Already resistration
     <a href="<%=request.getContextPath() %>/login">login</a> 
    </div>
  </form>
 </div>
 </div>
<script src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/Barrett.js"></script>
<script type="text/javascript" src="js/BigInt.js"></script>
<script type="text/javascript" src="js/RSA.js"></script>
<script type="text/javascript" src="js/jQuery.md5.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script>

  $("input[name='phone']").blur(function(){
	 if(form1.phone.value==""||form1.phone.value==null){
		 $("#attach1").append("该项不能为空");
		 return;
	 }
	 if(form1.phone.value.length!=11){
		 $("#attach1").append("请检查用户名格式");
		 return;
	 }
	 $.ajax({
		  url:"<%=request.getContextPath()%>/sigin?method=checkphone",
		  type:"get",
		  dataType:"json",
		  data:{mobile:$("input[name='phone']").val()},
		  success:function(data){
			  $("#attach1").append(data.msg);
		  }
	 });
   });
  $("input[name='phone']").focus(function(){
	 $('#attach1').empty(); 
	 $("#attach2").empty(); 
	 $("#attach3").empty(); 
  });

   $("input[name='pwd']").blur(function(){
	  if(form1.pwd.value==""){
		  $("#attach2").append("该项不能为空");
		  return
	  } 
	  if(form1.pwd.value.length<6){
		  $("#attach2").append("密码长度不低于6位");
	  }
   });
   
   $("input[name='pwd']").focus(function(){
	 $("#attach2").empty(); 
	 $("#attach1").empty(); 
	 $("#attach3").empty(); 
   });
   
   $("input[name='checkcode']").blur(function(){
	  if(form1.checkcode.value==""){
		  $("#attach3").append("此项不能为空");
		  return;
	  }
	 $.ajax({
		  url:"<%=request.getContextPath()%>/sigin?method=checkcode",
		  type:"get",
		  dataType:"json",
		  data:{code:$("input[name='checkcode']").val()},
		  success:function(data){
			  $("#attach3").append(data.msg);
		  }
	 });
  });
  
   $("input[name='checkcode']").focus(function(){
	     $("#attach1").empty(); 
		 $("#attach2").empty(); 
		 $("#attach3").empty(); 
   });
   
   $("document").ready(function(){
		/*防刷新，检测是否存在cookie*/
		if($.cookie("captcha")){
			var count=$.cookie("captcha");
			var btn=$("input[name='btn']");
			btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
			var resend=setInterval(function(){
				count--;
				if(count>0){
					btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
				    $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
				}else{
					clearInterval(resend);
					btn.val("获取验证码").removeClass("disabled").removeAttr("disabled style");
				}
			}, 1000);
			
		}
   });
 

	 
   function dosubmit(){
	   /*检查pnone是否为空*/
	   if(form1.phone.value==""){
		   $("#attach1").empty();
		   $("#attach1").append("该项不能为空");
		   return false;
	   }
	   var btn=$("input[name='btn']");
	   var count=60;
	   /*请求发送手机验证码*/
	   $.ajax({
		  url:"<%=request.getContextPath()%>/sigin?method=sendcode",
		  type:"get",
		  dataType:"json",
		  data:{mobile:$("input[name='phone']").val()},
		  success:function(){
			  
		  }
	   });
	   
	   var resend=setInterval(function(){
		   count--;
		   if(count>0){
			   btn.val(count+"秒后可重新获取");
			   $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
	   
		   }else{
			   clearInterval(resend);
			   btn.val("获取密码").removeAttr("disabled style");
			   
		   }
	   }, 1000);
	   btn.attr("diabled",true).css("cursor","not-allowed");
	   return false;
   }
   
   function check2(){
	   if(form1.phone.value==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach3").empty();
		   $("#attach1").append("该项不能为空");
		   return false;
	   }
	   if(form1.checkcode.value==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach3").empty();
		   $("#attach3").append("该项不能为空");
		   return false;
	   }
	   if(form1.pwd.value==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach3").empty();
		   $("#attach2").append("该项不能为空");
		   return false;
	   }
	   encode();//发送请求前对密码加密
	   return true;
   }
   /*rsa对密码进行传输加密*/
   function encode(){
	   setMaxDigits(129);
	   var key=new RSAKeyPair("<%=request.getAttribute("exponent") %>","","<%=request.getAttribute("publickey") %>");
       var pwdMD5Twice = $.md5($.md5(form1.pwd.value));
       var pwdRtn = encryptedString(key, pwdMD5Twice);
       form1.pwd.value=pwdRtn;
   }
   
</script>

</body>
</html>